<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jquery-3.6.0-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <script src="./js/tools.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        .cart tbody [type="number"] {
            width: 50px;
        }
        .topTu{
            width: 100%;
        }
    </style>
</head>

<body>
    <img src="https://img.alicdn.com/imgextra/i4/O1CN01RuP6G71SyJbnuaQ8M_!!6000000002315-2-tps-1190-110.png" alt=""
        class="topTu">
    <div class="container">
        <table class="cart table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="selectAll">全选</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>商品小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th><input type="checkbox" name="selectAll">全选</th>
                    <th class="clear">清空购物车</th>
                    <th><a href="./index.html">去列表页</a></th>
                    <th>总数量<span class="totalNum">0</span></th>
                    <th>总价<span class="totalPrice">0</span></th>
                    <th colspan="2">结算</th>
                </tr>
            </tfoot>
        </table>

    </div>
</body>
<script src="./js/tools.js"></script>
<script src="./js/gouwuche.js"></script>
<!-- <script>
    let data = window.localStorage.getItem('data')
    /* let name = window.localStorage.getItem('name') */
    //本地存储没有数据，跳转列表页
    var name = localStorage.getItem('id')
    console.log(data)
    Find()
    function Find() {
        if (!data) {
            //本地存储没有数据，跳转列表页
            var str = `
                    <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="./index.html" role="button">去列表页</a></p>
                    </div>
                `
            $('.container').html(str)
            return
        }
    }

    data = JSON.parse(data)
    console.log(data);
    //从本地存储中筛选出本用户的商品
    data = data.filter(item => item.name === name)
    console.log(data.length);
    //本地存储中没有当前用户的购物车商品信息
    Find1()
    function Find1() {
        if (data.length === 0) {
            var str = `
                    <div class="jumbotron">
                            <h1>购物车空空如也！</h1>
                            <p>赶紧去列表页挑选喜欢的商品吧！</p>
                            <p><a class="btn btn-primary btn-lg" href="./index.html" role="button">去购买</a></p>
                    </div>
                `
            $('.container').html(str)
            return
        }
    }

    /* 获取新品页数据 */
    promiseAjax({
        url: '/wangyi',
        method: 'post',
    }).then(res => {
        res = JSON.parse(res)
        console.log(res);
        if (res.code == 200) {
            var newItems = res.data.newItems;
            console.log(newItems);
            //将商品列表与当前用户的data遍历，筛选相同
            var arr = []
            data.forEach(item1 => {
                newItems.forEach(item2 => {
                    if (item1.cartGoodsid == item2.id)
                        arr.push(item2)
                })
            })
            console.log(arr);
            //渲染页面
            var str = ''
            arr.forEach(item => {
                var number = data.find(v => { return v.cartGoodsid == item.id }).number
                str += `
                        <tr>
                            <td><input type="checkbox" checked name="selectOne"></td>
                            <td><img src="${item.scenePicUrl}" width=100 height=100 /></td>
                            <td>${item.name}</td>
                            <td>${item.retailPrice}</td>
                            <td data-id="${item.id}">
                                <input type="button" name="reduce" value="-" />  
                                <input type="text" name="number" value="${number}" />  
                                <input type="button" data-number=${item.sellVolume} name="add" value="+" />    
                            </td>
                            <td>${(item.retailPrice * number).toFixed(2)}</td>
                            <td class='remove'>删除</td>
                        </tr>
                    `
            })
            $('tbody').html(str)
            //购物车功能实现
            //1.全选单选
            selectAll()
            //2.加减操作
            addReduce()
            //3.计算总价和总数量
            count()
            //4.清空购物车
            clear()
            //5.删除当前用户的某个商品
            remove()

        }
    })

    //1.全选单选函数
    function selectAll() {
        //全选
        $('[name = "selectAll"]').on('click', function () {
            var bool = $(this).prop('checked')
            $('[name = "selectOne"]').prop('checked', bool)
            $('[name = "selectAll"]').prop('checked', bool)
            count()
        })
        //单选
        var arr = Array.prototype.slice.call($('[name = "selectOne"]'))
        arr.forEach(item => {
            item.onclick = function () {
                //判断是否全选
                var bool = arr.every(v => v.checked)
                //设置全选按钮
                $('[name = "selectAll"]').prop('checked', bool)
                count()
            }
        })
    }
    //2.加减操作
    function addReduce() {
        //减法
        $('[name="reduce"]').on('click', function () {
            var number = $(this).next().val()
            number -= 1
            if (number <= 1) {
                number = 1
            }
            $(this).next().val(number)
            //改变本地存储
            var data = window.localStorage.getItem('data')
            data = JSON.parse(data)
            var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
            obj.number = number
            window.localStorage.setItem('data', JSON.stringify(data))
            //修改小计
            var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
            $(this).parent().next().text(xiaoji)
            //调用count函数
            count()
        })

        //加法
        $('[name="add"]').on('click', function () {
            var number = $(this).prev().val() - 0
            number += 1
            if (number >= $(this).attr('data-number')) {
                number = $(this).attr('data-number')
            }
            $(this).prev().val(number)
            //改变本地存储
            var data = window.localStorage.getItem('data')
            data = JSON.parse(data)
            var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
            obj.number = number
            window.localStorage.setItem('data', JSON.stringify(data))
            //修改小计
            var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
            $(this).parent().next().text(xiaoji)
            //调用count函数
            count()
        })

        //输入数字
        $('[name="number"]').on('blur', function () {
            var number = $(this).val() - 0
            //改变本地存储
            if (number >= $(this).next().attr('data-number')) {
                $(this).val($(this).next().attr('data-number'))
            }
            var data = window.localStorage.getItem('data')
            data = JSON.parse(data)
            var obj = data.find(item => item.cartGoodsid == $(this).parent().attr('data-id') && item.name == name)
            obj.number = number
            window.localStorage.setItem('data', JSON.stringify(data))
            //修改小计
            var xiaoji = (number * ($(this).parent().prev().text())).toFixed(2)
            $(this).parent().next().text(xiaoji)
            //调用count函数
            count()
        })
    }
    //3.计算总价和总数量
    function count() {
        var totalNum = 0;
        var totalPrice = 0;
        var arr = Array.prototype.slice.call($('[name = "selectOne"]'))
        arr.forEach(item => {
            //判断是否全选
            var bool = item.checked
            //设置全选按钮
            if (bool) {
                totalNum += item.parentElement.parentElement.children[4].children[1].value - 0
                totalPrice += item.parentElement.parentElement.children[5].innerText - 0
            }
        })
        $('.totalNum').text(totalNum)
        $('.totalPrice').text(totalPrice.toFixed(2))
    }
    //4.清空购物车
    function clear() {
        $('.clear').on('click', function () {
            layer.confirm('你确定要清空购物车吗？', {
                btn: ["确定", "取消"]
            }, () => {
                var str = `
                <div class="jumbotron">
                    <h1>购物车空空如也！</h1>
                    <p>赶紧去列表页挑选喜欢的商品吧！</p>
                    <p><a class="btn btn-primary btn-lg" href="../xinpin.html" role="button">去列表页</a></p>
                </div>
            `
                // 把str放在页面中
                $('.container').html(str)
                //从本地存储在将属于当前用户的数据删除
                var data = window.localStorage.getItem("data")
                var name = window.localStorage.getItem('name')
                data = JSON.parse(data);
                //筛选出不属于当前用户的数据，重新存入本地
                var arr = data.filter(item => item.name != name)
                window.localStorage.setItem('data', JSON.stringify(arr))
                layer.msg('清空成功', {
                    icon: 1,
                    time: 1000
                })
            })
        })
    }
    //5.删除当前用户的某个商品
    function remove() {
        $('.remove').on('click', function () {
            layer.confirm('你确定要删除吗？', {
                btn: ["确定", "取消"]
            }, () => {
                //将这个tr从tbody中删除
                $(this).parent().remove()
                var data = localStorage.getItem('data')
                data = JSON.parse(data)
                //从data中筛选出本条数据下标
                var index = data.findIndex(item =>
                    item.name == name && item.cartGoodsid == $(this).prev().prev().attr('data-id')
                )
                //根据下标删除数组的一个对象
                data.splice(index, 1)
                var arr = data.filter(item => item.name == name)
                localStorage.setItem('data', JSON.stringify(arr))
                count()
                layer.msg('删除成功', {
                    icon: 1,
                    time: 1000
                })
                if (arr.length == 0) {
                    //购物车空空如也
                    var str = `
                    <div class="jumbotron">
                        <h1>购物车空空如也！</h1>
                        <p>赶紧去列表页挑选喜欢的商品吧！</p>
                        <p><a class="btn btn-primary btn-lg" href="./index.html" role="button">去列表页</a></p>
                    </div>
                `
                    // 把str放在页面中
                    $('.container').html(str)
                }
            })
        })
    }
</script> -->

</html>